<template>
  <div class="container">
    <div class="top1">
      <div style="text-align:center;color:#fff;line-height:30px;font-size:16px"> 皮尔逊系数 </div>
      <top1 />
    </div>
    <div class="top2">
       <div style="text-align:center;color:#fff;line-height:30px;font-size:16px">粉丝和关注者数量分布</div>
      <top2 />
    </div>
    <div class="top3">
      <div style="text-align:center;color:#fff;line-height:30px;font-size:16px"> 推文分析内容/top5排行</div>
      <top3 />
    </div>

    <div class="under1">
      <div style="text-align:center;color:#fff;line-height:30px;font-size:16px">获取用户粉丝数/关注数分布</div>
      <under1 />
    </div>
    <div class="under2">
      <div style="text-align:center;color:#fff;line-height:30px;font-size:16px">机器人用户比例统计分析</div>
      <under2 />
    </div>
    <div class="under3">
      <div style="text-align:center;color:#fff;line-height:30px;font-size:16px">社交机器人与人类发文数量区间分析</div>
      <under3 />
    </div>
    <div class="under4">
      <div style="text-align:center;color:#fff;line-height:30px;font-size:16px">机器人和人类发文量随时间序列的变化</div>
      <under4 />
    </div>
  </div>
</template>

<script>
import top1 from "@/pages/top1/top1";
import top2 from "@/pages/top2/top2";
import top3 from "@/pages/top3/top3";
import under1 from "@/pages/under1/under1";
import under2 from "@/pages/under2/under2";
import under3 from "@/pages/under3/under3";
import under4 from "@/pages/under4/under4";
export default {
  data() {
    return {};
  },
  components: {
    top1,
    top2,
    top3,
    under1,
    under2,
    under3,
    under4
  }
};
</script>

<style scoped>

.container {
  width: 100%;
  height: calc(100% - 110px);
  /* background: rgba(200, 200, 200, 0.1) */
}
.top1,
.top3 {
  float: left;
  height: 62%;
  width: calc(21% - 13px);
  box-shadow: #3ed0fd 3px 3px 13px;
  margin-left: 20px;
   background-color:#52524c3a
}
/* .top1{
   background-color:#e6ce82f3
} */

.top3{
  box-shadow: #3ed0fd -5px  3px  13px ;
  
}
.top2 {
  float: left;
  height: 62%;
  width: calc(58% - 60px);
  box-shadow: #979899 0px 3px 13px;
  margin-left: 20px;
  
  
}
.under1,
.under2,
.under3,
.under4 {
  float: left;
  height: calc(44% - 64px);
  width: calc(25% - 26px);
  /* border: solid 1px #e6e6e6; */
    background-color:#4d4d4b42
}
.under1 {
  margin-top: 20px;
  margin-left: 20px;
  box-shadow: #3ed0fd 3px -5px 13px ;
}
.under2 {
  margin-top: 20px;
  margin-left: 20px;
  box-shadow: #3ed0fd 3px -5px 13px;
  font-size: 32px;
}
.under3 {
  margin-left: 20px;
  margin-top: 20px;
  box-shadow: #3ed0fd 3px -5px 13px;
}

.under4 {
  margin-left: 20px;
  margin-top: 20px;
  box-shadow: #3ed0fd -5px -2px 13px;
}
</style>